<script setup>
import { letterGetSentAndPubInfoLimitService } from '@/api/letter'
import LetterNavShadow from './components/LetterNavShadow.vue'
import { ref } from 'vue'
import { formattedDataByLetterInfo } from './utils/tool'

// 导入存放好的图片
import p1 from '@/assets/letter/p1.png'
import p2 from '@/assets/letter/p2.png'
import p3 from '@/assets/letter/p3.png'
import p4 from '@/assets/letter/p4.png'
import p5 from '@/assets/letter/p5.png'
import p6 from '@/assets/letter/p6.png'
import p7 from '@/assets/letter/p7.png'
import { getRandomElement } from '@/utils/array'
const arr = [p1, p2, p3, p4, p5, p6, p7]

let imgTemp = null
// 随机返回一个图片
const getImg = () => {
  let img = getRandomElement(arr)
  while (imgTemp == img) {
    img = getRandomElement(arr)
  }
  imgTemp = img
  return img
}

// 导航
const navItem = [
  { href: '/letter/write', title: '撰写信件' },
  { href: '/letter/user', title: '个人中心' },
  { href: '/letter', title: '返回首页' }
]

const params = ref({
  pagenum: 1, // 当前页
  pagesize: 5 // 当前生效的每页条数
})
const letterList = ref([])
const skeletonLoading = ref(true)
const getSentAndPubInfo = async () => {
  const res = await letterGetSentAndPubInfoLimitService(params.value)
  // 解密
  const tmpList = res.data.data
  formattedDataByLetterInfo(tmpList)
  for (let item of tmpList) {
    item.img = getImg()
    item.to = '/letter/showcur?id=' + item.id
  }
  letterList.value = tmpList
  skeletonLoading.value = false
}
getSentAndPubInfo()

// 跳转到指定id的pub页
const to = (id) => {
  window.open('/letter/showpub?id=' + id, '_blank')
}

// 加载数据
const infiniteDisabled = ref(false) // 是否禁用底部加载
const isLoading = ref(false) // 是否正在加载的动画
const isLoadingText = ref('正在加载更多数据中...')
const load = async () => {
  // 当用户滑到底部时，禁用加载
  infiniteDisabled.value = true
  // 生成提示动画
  isLoading.value = true
  // 去往新的一页加载
  params.value.pagenum++
  // 发送新的请求获取新一页的数据
  const res = await letterGetSentAndPubInfoLimitService(params.value)
  // 判断是否有新的数据, 如果没有, 则禁用底部加载功能
  if (res.data.data.length <= 0) {
    infiniteDisabled.value = true
    isLoadingText.value = '没有更多数据了'
    return
  }
  // 解密数据
  formattedDataByLetterInfo(res.data.data)
  // 将新的数据追加到列表中
  res.data.data.forEach((element) => {
    element.img = getImg()
    element.to = '/letter/showcur?id=' + element.id
    letterList.value.push(element)
  })

  // 解除禁用加载和提示动画
  infiniteDisabled.value = false
  isLoading.value = false
}
</script>

<template>
  <letter-nav-shadow :nav-item="navItem"></letter-nav-shadow>
  <null-box size="50"></null-box>
  <div style="display: flex; justify-content: center">
    <div style="width: 85%">
      <div style="display: flex; align-items: center; margin-bottom: 20px">
        <svg
          t="1736950356652"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4338"
          width="50"
          height="50"
        >
          <path
            d="M864.256 574.293333V328.362667a130.730667 130.730667 0 0 0-93.866667-125.269334V147.456a17.066667 17.066667 0 0 0-17.066666-17.066667h-133.973334a17.066667 17.066667 0 0 0-17.066666 17.066667v50.005333H313.344a153.6 153.6 0 0 0-153.6 153.6v223.232a51.2 51.2 0 0 0 10.922667 101.034667h52.053333a62.634667 62.634667 0 0 0 61.781333 53.76h163.498667V921.6a17.066667 17.066667 0 1 0 34.133333 0V729.088h59.733334V921.6a17.066667 17.066667 0 1 0 34.133333 0V729.088h163.498667A62.634667 62.634667 0 0 0 802.133333 675.328h51.2a51.2 51.2 0 0 0 10.922667-101.034667z m-227.84-409.6h99.84v73.216h-99.84z m-17.066667 187.733334a31.573333 31.573333 0 1 1-31.573333 31.573333 31.573333 31.573333 0 0 1 31.573333-31.744z m-17.066666-120.661334v89.088a65.536 65.536 0 1 0 34.133333 0v-48.981333h116.906667a17.066667 17.066667 0 0 0 17.066666-17.066667V238.933333a96.938667 96.938667 0 0 1 59.733334 89.258667v187.733333H515.584v-164.864a153.6 153.6 0 0 0-57.173333-119.466666z m227.84 318.293334v22.869333H515.584v-22.869333z m-500.053334-83.968l80.384 39.936a18.090667 18.090667 0 0 0 15.36 0L481.450667 477.866667v94.549333H274.261333V398.165333a5.632 5.632 0 0 1 5.632-5.632h201.557334v47.616l-63.317334 31.573334-72.874666-36.181334a17.066667 17.066667 0 0 0-22.869334 7.68 17.066667 17.066667 0 0 0 7.68 22.869334zM321.877333 358.4l4.096-26.453333a5.973333 5.973333 0 0 1 6.656-4.778667l148.821334 23.552V358.4z m-128-7.338667a119.466667 119.466667 0 0 1 119.466667-119.466666h48.64a119.466667 119.466667 0 0 1 114.005333 83.797333l-138.069333-22.016a39.936 39.936 0 0 0-45.568 33.109333l-5.12 31.914667h-7.338667a39.936 39.936 0 0 0-39.765333 39.765333v174.762667h-46.250667z m546.133334 343.893334H284.501333a28.501333 28.501333 0 0 1-26.965333-19.626667h508.928a28.501333 28.501333 0 0 1-26.965333 19.626667zM853.333333 641.194667H170.666667a17.066667 17.066667 0 0 1 0-34.133334h682.666666a17.066667 17.066667 0 0 1 0 34.133334z"
            fill="#2c2c2c"
            p-id="4339"
          ></path>
        </svg>
        <el-text style="font-size: 25px" size="large">公开信箱：</el-text>
      </div>
      <div
        v-infinite-scroll="load"
        :infinite-scroll-immediate="false"
        :infinite-scroll-disabled="infiniteDisabled"
        :infinite-scroll-delay="200"
      >
        <el-skeleton
          :loading="skeletonLoading"
          style="--el-skeleton-circle-size: 100px"
          animated
        >
          <template #template>
            <el-row
              v-for="i in 5"
              :key="i"
              style="
                margin-bottom: 30px;
                border: 1px solid #e4e7ed;
                border-radius: 10px;
                align-items: center;
                padding: 20px;
              "
            >
              <el-col :span="2"><el-skeleton-item variant="circle" /></el-col>
              <el-col :span="22"><el-skeleton :rows="2" /></el-col>
            </el-row>
          </template>
          <template #default>
            <el-card
              v-for="item in letterList"
              :key="item.id"
              style="
                width: 100%;
                cursor: pointer;
                border-radius: 10px;
                margin-bottom: 30px;
              "
              shadow="hover"
              @click="to(item.id)"
            >
              <el-container>
                <el-aside
                  width="70px"
                  style="display: flex; align-items: center"
                >
                  <img
                    :src="item.img"
                    alt=""
                    width="70px"
                    height="70px"
                    style="border-radius: 10px"
                  />
                </el-aside>
                <el-main>
                  <el-text
                    tag="h2"
                    size="large"
                    style="
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    "
                  >
                    {{ item.title }}
                  </el-text>
                  <el-text
                    tag="p"
                    size="small"
                    style="
                      display: -webkit-box;
                      -webkit-box-orient: vertical;
                      -webkit-line-clamp: 3; /* 设置最多显示的行数 */
                      overflow: hidden;
                      text-overflow: ellipsis; /* 超出部分用省略号代替 */
                      line-height: 1.5; /* 根据需要调整行高 */
                      margin: 5px 0;
                    "
                  >
                    {{ item.contentText }}
                  </el-text>
                  <div style="display: flex">
                    <el-text
                      size="small"
                      style="display: block; width: 100%; text-align: left"
                      >写信时间：{{ item.writeTime.split(' ')[0] }}
                    </el-text>
                    <el-text
                      size="small"
                      style="display: block; width: 100%; text-align: right"
                      >寄出时间：{{ item.sendTime.split(' ')[0] }}
                    </el-text>
                  </div>
                </el-main>
              </el-container>
            </el-card>
          </template>
        </el-skeleton>

        <div style="text-align: center; padding-bottom: 20px" v-if="isLoading">
          {{ isLoadingText }}
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
::v-deep .el-card__body {
  padding-top: 0;
  padding-bottom: 0;
}
</style>
